<template>
  <div class="header">
    <div class="page-title">宴会厅管理</div>
    <el-button
      class="m-t-15"
      type="primary"
      size="small"
      icon="el-icon-edit"
      @click="handleCCreate"
      >宴会厅列表</el-button>
    <el-form>
      <el-form-item label="宴会厅名称">
        <el-input
            v-model="form.hall_name"
            autocomplete="off"
            placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <Editor :value="form.hall_content" @change="changeEditor" style="width:75%;"></Editor>
      </el-form-item>
      <el-form-item label="价格">
<!--        <el-select v-model="form.budget" placeholder="请选择" style="margin-left:10px">
          <el-option
              v-for="items  in price"
              :key="items.id"
              :label="items.name"
              :value="items.id">
          </el-option>
        </el-select>-->
        <el-input
            v-model="form.budget"
            autocomplete="off"
            placeholder="请输入桌数"
        ></el-input>
      </el-form-item>
      <el-form-item label="宴会厅图">
        <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :on-success="handleUploadSuccess"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeRemove"
            :on-remove = "handleRemoveAvatar"
            :multiple = true
            :file-list="form.hall_image_url"
            list-type="picture"
        ><el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="宴会厅视频">
        <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :on-success="handleUploadVideoSuccess"
            :before-upload="beforeAvatarVideoUpload"
            :before-remove="beforeRemove"
            :on-remove = "handleRemoveAvatarVideo"
            :multiple = true
            :file-list="form.hall_video_url"
            list-type="video"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div  v-for="(item,key) in form.hall_video_url" :key="key" style="height:185px;width:205px">
            <video v-if="item.url !='' && !videoFlag"
                   v-bind:src="item.url"
                   class="avatar video-avatar"
                   controls="controls" style="height:180px;width:200px">
              您的浏览器不支持视频播放
            </video>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="柱子数量">
        <el-input
            v-model="form.pole_num"
            autocomplete="off"
            placeholder="请输入描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="厅高">
        <el-input
            v-model="form.hall_height"
            autocomplete="off"
            placeholder="请输入厅高"
        ></el-input>
      </el-form-item>
      <el-form-item label="桌数">
        <el-select v-model="form.desk_id" placeholder="请选择" style="margin-left:10px;">
          <el-option
              v-for="item in zhuoshu"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitForm">确 定</el-button>
      </div>
  </div>
</template>
<script>

import { UPLOAD_URL,CONST_DMOMAIN_URL } from "@/config/env";
import {
  request_hall_detail,
  request_hall_list,
  request_hall_create,
  request_hall_update,
  request_hall_delete,
  request_zhuoshu_list,
  request_price_list,
  request_build_qrcode,
  request_operate_door,
} from "@/util/api";
import Editor from "@/components/Editor";

export default {
  name: "SeekType",
  data() {
    return {
      current: 1,
      total: 0,
      form: {
        hall_content:'',
        hall_video_url:[],
        hall_image_url:[],

      },
      // 门店是否显示
      dialogFormVisible: false,
      uploadUrl: UPLOAD_URL,
      actionType: 0, // 1 添加  2 编辑
      zhuoshu:[],
      price:[],
      hotel_id:0
    };
  },
  components: {
    Editor
  },
  //computed: {},
  mounted() {
    this.hotel_id=this.$route.query.hotel_id;
    let id = this.$route.query.id;

    if(id){
      this.actionType=2
      request_hall_detail( {
        id:id
      }).then(res => {
        const result = res.data
        if (result.code == 200) {
          this.form = result.data
        }
      }).catch()
    }else{
      this.actionType=1
    }
    this.init();
  },
  methods: {
    buildCode(row) {
       request_build_qrcode({
            id: row.id,
          })
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.$message.success({
                  message: "操作成功！",
                  offset: 70,
                });
                location.reload();
              } else {
                this.$message.error({
                  message: result.message,
                  offset: 70,
                });
              }
            })
            .catch();
    },
    operateDoor(row, type) {
       request_operate_door({
            id: row.id,
            type
          })
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.$message.success({
                  message: "删除成功！",
                  offset: 70,
                });
                this.changePage(this.page)
              } else {
                this.$message.error({
                  message: result.message,
                  offset: 70,
                });
              }
            })
            .catch();
    },
    init() {
      this.$nextTick(() => {
        this.changePage(1);
        request_zhuoshu_list()
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.zhuoshu = result.data;
              }
            });
        request_price_list()
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.price = result.data;
              }
            });
      });
    },
    // 富文本内容
    changeEditor(val) {
      this.form.hall_content = val
    },
    handlehall(row) {
        this.$router.push('/hall?id=' + row.id)
    },
     //发布图片上传成功的回调函数
    handleUploadSuccess(res) {
      this.form.hall_image_url.push({'url':CONST_DMOMAIN_URL +res.data});
    },
    //发布视频上传成功的回调函数
    handleUploadVideoSuccess(res) {
      if(this.form.hall_video_url==''){
        this.form.hall_video_url=[];
      }
      this.form.hall_video_url.push({'url':CONST_DMOMAIN_URL +res.data});
    },
    handleRemoveAvatar(file,fileList){
      this.form.hall_image_url = fileList
    },
    handleRemoveAvatarVideo(file,fileList){
      this.form.hall_video_url = fileList
    },
    //上传视频前的验证函数
    beforeAvatarVideoUpload(file) {
      let types = ['video/mp4'];
      const isJPG=types.includes(file.type)
      // const isJPG = file.type === "image/png";验证单张图片
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传视频只能是 mp4 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传视频大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },
    //图片上传前的验证函数
    beforeAvatarUpload(file) {
      let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
      const isJPG=types.includes(file.type)
      // const isJPG = file.type === "image/png";验证单张图片
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 jpg,jpeg,bmp,png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isJPG && isLt2M;
    },
    // 添加
    handleCCreate() {
      /*this.actionType = 1;
      this.form = {banners:['']};
      this.dialogFormVisible = true;*/
      this.$router.push('/hall')
    },
    // 编辑
    handleEdit(row) {
      this.actionType = 2;
      this.form = row;
      this.dialogFormVisible = true;
    },
    // 提交
    handleSubmitForm() {
      let apiFunc;
      switch (this.actionType) {
        case 1: // 添加
            apiFunc = request_hall_create;
            this.form.hotel_id = this.hotel_id
          break;
        case 2: // 编辑
            apiFunc = request_hall_update;
          break;
        default:
          this.$message.error({
            message: "操作类型不正确",
            offset: 70,
          });
          return false;
      }
      apiFunc({
        ...this.form,
      }).then((res) => {
        const result = res.data;
        if (result.code == 200) {
          this.dialogFormVisible = false;
          this.$notify.success({
            title: "系统提示",
            message: result.message,
            offset: 70,
          });
          this.$router.push('/hall?id=' + this.hotel_id)
        } else {
          this.$message.error({
            message: result.message,
            offset: 70,
          });
        }
      });
    },
    // 删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除，是否继续？", "系统提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          request_hall_delete({
            id: row.id,
          })
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.$message.success({
                  message: "删除成功！",
                  offset: 70,
                });
                this.changePage(this.page)
              } else {
                this.$message.error({
                  message: result.message,
                  offset: 70,
                });
              }
            })
            .catch();
        })
        .catch(() => {
          this.$message.info({
            message: "已取消删除！",
            offset: 70,
          });
        });
    },
    // 分页
    changePage(page) {
      request_hall_list({
        page,
        hotel_id:this.$route.query.id
      })
        .then((res) => {
          const result = res.data;
          if (result.code == 200) {
            this.tableData = result.data.data;
            this.total = result.data.total;
            this.current = result.data.current;
          }
        })
        .catch();
    },
  },
};
</script>

<style scoped  lang="less">
  .avatar-uploader {
    float:left;
    margin-right:10px;
    margin-bottom:10px;
   }
   .banner-add {
      clear:both;
      margin-top:20px;
   }
</style>